<template>
  <div class="orders-container">
    <!-- 顶部导航 -->
    <div class="header">
      <div class="back-button" @click="goBack">
        <van-icon name="arrow-left" size="20" />
      </div>
      <h1 class="header-title">我的订单</h1>
      <div class="search-button" @click="showSearchPopup">
        <van-icon name="search" size="20" />
      </div>
    </div>
    
    <!-- 订单状态标签页 -->
    <van-tabs v-model:active="activeTab" sticky swipeable animated>
      <van-tab title="全部" name="all">
        <order-list 
          :orders="filteredOrders" 
          :loading="loading" 
          :finished="finished" 
          @refresh="refreshOrders" 
          @load="fetchOrders" 
        />
      </van-tab>
      <van-tab title="待付款" :name="OrderStatus.PENDING">
        <order-list 
          :orders="filteredOrders" 
          :loading="loading" 
          :finished="finished" 
          @refresh="refreshOrders" 
          @load="fetchOrders" 
        />
      </van-tab>
      <van-tab title="待发货" :name="OrderStatus.PAID">
        <order-list 
          :orders="filteredOrders" 
          :loading="loading" 
          :finished="finished" 
          @refresh="refreshOrders" 
          @load="fetchOrders" 
        />
      </van-tab>
      <van-tab title="待收货" :name="OrderStatus.SHIPPING">
        <order-list 
          :orders="filteredOrders" 
          :loading="loading" 
          :finished="finished" 
          @refresh="refreshOrders" 
          @load="fetchOrders" 
        />
      </van-tab>
      <van-tab title="已完成" :name="OrderStatus.COMPLETED">
        <order-list 
          :orders="filteredOrders" 
          :loading="loading" 
          :finished="finished" 
          @refresh="refreshOrders" 
          @load="fetchOrders" 
        />
      </van-tab>
      <van-tab title="售后/退款" name="after-sale">
        <order-list 
          :orders="filteredOrders" 
          :loading="loading" 
          :finished="finished" 
          @refresh="refreshOrders" 
          @load="fetchOrders" 
        />
      </van-tab>
    </van-tabs>
    
    <!-- 搜索弹窗 -->
    <van-popup
      v-model:show="showSearch"
      position="top"
      :style="{ height: '100px' }"
      round
    >
      <div class="search-popup">
        <van-search
          v-model="searchKeyword"
          placeholder="请输入订单号或商品名称"
          shape="round"
          show-action
          @search="onSearch"
          @cancel="showSearch = false"
        >
          <template #action>
            <div @click="onSearch">搜索</div>
          </template>
        </van-search>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import OrderList from '@/components/OrderList.vue'
import { getOrderList } from '@/api/order'
import { showToast } from 'vant'
import { OrderStatus } from '@/utils/orderStatus'

const router = useRouter()
const route = useRoute()

// 标签页状态
const activeTab = ref('all')
const showSearch = ref(false)
const searchKeyword = ref('')
const isRefreshing = ref(false)

// 订单数据
const orders = ref([])
const loading = ref(false)
const finished = ref(false)
const pagination = ref({
  page: 1,
  pageSize: 10,
  total: 0
})

// 过滤后的订单列表
const filteredOrders = computed(() => {
  return orders.value
})

// 返回上一页
const goBack = () => {
  router.back()
}

// 显示搜索弹窗
const showSearchPopup = () => {
  showSearch.value = true
}

// 搜索
const onSearch = () => {
  showSearch.value = false
  pagination.value.page = 1
  orders.value = []
  finished.value = false
  fetchOrders()
}

// 刷新订单列表
const refreshOrders = () => {
  isRefreshing.value = true
  pagination.value.page = 1
  orders.value = []
  finished.value = false
  
  fetchOrders().finally(() => {
    isRefreshing.value = false
  })
}

// 获取订单列表
const fetchOrders = async () => {
  if (loading.value || finished.value) return
  
  loading.value = true
  
  try {
    const params = {
      page: pagination.value.page,
      pageSize: pagination.value.pageSize,
      keyword: searchKeyword.value
    }
    
    // 处理不同的标签页状态
    if (activeTab.value !== 'all') {
      if (activeTab.value === 'after-sale') {
        // 售后/退款标签页，包含售后中和已退货状态
        params.status = OrderStatus.REFUNDING
      } else {
        // 其他标签页，直接使用状态值
        params.status = activeTab.value
      }
    }
    
    const res = await getOrderList(params)
    
    if (res && res.data.list) {
      if (pagination.value.page === 1) {
        orders.value = res.data.list
      } else {
        orders.value = [...orders.value, ...res.data.list]
      }
      
      pagination.value = res.pagination || pagination.value
      
      // 判断是否加载完成
      if (orders.value.length >= pagination.value.total) {
        finished.value = true
      } else {
        pagination.value.page++
      }
    } else {
      showToast('获取订单列表失败')
      finished.value = true
    }
  } catch (error) {
    finished.value = true
  } finally {
    loading.value = false
  }
}

// 监听路由参数变化
watch(() => route.query.status, (newStatus) => {
  if (newStatus) {
    activeTab.value = newStatus
    refreshOrders()
  }
})

// 监听标签页变化
watch(() => activeTab.value, () => {
  refreshOrders()
})

// 初始化
onMounted(() => {
  // 从URL参数获取初始标签页
  if (route.query.status) {
    activeTab.value = route.query.status
  }
  
  // 获取订单列表
  fetchOrders()
})
</script>

<style scoped>
.orders-container {
  min-height: 100vh;
  background-color: #f8fafc;
}

/* 顶部导航 */
.header {
  display: flex;
  align-items: center;
  padding: 16px;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.back-button {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  cursor: pointer;
  color: #334155;
  background: transparent;
  border: none;
  padding: 0;
}

.header-title {
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  text-align: center;
}

.search-button {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #334155;
  background: transparent;
  border: none;
  padding: 0;
}

/* 搜索弹窗 */
.search-popup {
  padding: 8px;
}
</style>